<template>
  <div>
    <template v-for="(item, index) in node.children">
      <template v-if="item.tagName === 'field'">
        <OField
          :key="index"
          type="cell"
          :editable="editable"
          :data-info="dataInfo"
          :view-info="{ ...viewInfo, node: item }"
          @on-event="handleOnEvent"
        />
      </template>

      <template v-else-if="item.tagName === 'group'">
        <van-cell-group :key="index" :title="item.attrs.string || ' '">
          <template v-for="(item2, index2) in item.children">
            <template v-if="item2.tagName === 'field'">
              <OField
                :key="'Gin' + index2"
                type="cell"
                :editable="editable"
                :data-info="dataInfo"
                :view-info="{ ...viewInfo, node: item2 }"
                @on-event="handleOnEvent"
              />
            </template>

            <template v-else-if="item2.tagName === 'div'">
              <van-cell :key="'Gin' + index2">
                <ONode
                  :editable="editable"
                  :loading="loading"
                  :data-info="dataInfo"
                  :view-info="{ ...viewInfo, node: item2 }"
                  @on-event="handleOnEvent"
                />
              </van-cell>
            </template>

            <template v-else>
              <div :key="'Gin' + index2">in GroupIn: {{ item2.tagName }}</div>
            </template>
          </template>
        </van-cell-group>
      </template>

      <template v-else>
        <div :key="index">in Group: {{ item.tagName }}</div>
      </template>
    </template>
  </div>
</template>

<script>
import OMixin from './OMixin'

import OField from './OField.js'
import ONode from './ONode'

export default {
  name: 'OGroup',
  components: { OField, ONode },
  mixins: [OMixin],
  props: {},
  data() {
    return {}
  },
  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style type="text/css"></style>
